<template>
	<view class="word">
		<!-- 收货地址信息 -->
		<view class="address-wrap">	
			<view class="no-address" v-if="false">
				<view class="info">
					<view class="address-right" @click="editAddr">
						<uni-icons type="compose" size="23" color="#999"></uni-icons>
					</view>
					<uni-icons type="location-filled" size="23" color="#FF162E"></uni-icons>
					<text class="no-address-txt">请填写您的收货信息</text>
				</view>
				<image src="" mode="widthFix"></image>
			</view>
			<view class="address" v-if="true">
				<view class="info">
					<view class="address-right" @click="editAddr">						
						<uni-icons type="compose" size="23" color="#999"></uni-icons>
					</view>
					<view class="info-top">
						<text class="default">默认</text>
						<text class="name">{{addressObj.province}}{{addressObj.city}}{{addressObj.country}}{{addressObj.detail}}</text>
					</view>
					<view class="area">
						<view class="area_txt">
							<text class="username">{{addressObj.name}}</text>
							<text class="phone">{{addressObj.phone}}</text>
						</view>
					</view>
				</view>
				<image src="" mode="widthFix"></image>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="order">
			<view class="orderList">
				<view class="details">
					<view class="img-box">
						<image src="https://img.quanminyanxuan.com/excel/530bb640cdfb43a7a6d17f0f861db6bd.jpg" mode="widthFix"></image>
					</view>
					<view class="detail_item">
						<view class="item-top">
							<text class="title line2">【福运相随】精选原矿天然紫金砂手串招财转运平安康乐</text>
						</view>
						<view class="sans">
							已选择 规格:紫金砂 转运珠手链
						</view>
						<view class="othing">
							<view class="new-score-style">
								<text>5000</text>
								<text>积分</text>
								+89元
							</view>
							<view class="new-score-style-txt">
								<text>价格¥589.0</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="service-box">
				<view class="service-left">
					<!-- <text> -->
						<svg t="1661162089917" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22293" width="20" height="20"><path d="M516.396 79.752C280.283 80.359 88.684 272.964 89.303 509.078c0.607 236.101 193.213 427.714 429.326 427.095 236.113-0.596 427.7-193.213 427.107-429.326C945.117 270.731 752.523 79.132 516.396 79.752zM518.488 880.57c-205.448 0.542-373.027-166.161-373.558-371.634-0.542-205.447 166.175-373.027 371.623-373.555 205.461-0.542 373.038 166.158 373.557 371.605C890.649 712.447 723.949 880.027 518.488 880.57z" p-id="22294" fill="#b5673e"></path><path d="M382.568 287.509c-9.694 0-22.341 4.312-27.516 25.144-9.591 59.99-32.062 111.023-67.103 152.156-6.995 11.19-6.313 22.471 2.348 33.956 10.054 10.042 21.35 9.242 30.988-1.806 4.325-4.336 8.275-9.11 11.786-14.273l0.012 220.366c1.755 17.63 12.739 22.509 21.645 23.518l0.401 0.051 0.398-0.051c14.237-1.422 21.748-9.682 21.748-23.878L377.275 405.462c13.257-30.342 21.863-59.356 25.53-86.137C406.278 296.674 394.094 289.562 382.568 287.509z" p-id="22295" fill="#b5673e"></path><path d="M740.7 651.685c-68.817-32.085-118.534-68.999-147.909-109.761l131.672 0c11.9 0 18.459-7.175 18.408-20.728-1.475-11.576-8.674-17.939-20.238-17.939L578.362 503.257l0-41.765 91.249 0c26.406 0 40.372-13.322 40.372-38.54L709.983 337.02c0-26.406-13.966-40.357-40.372-40.357L450.43 296.663c-26.392-1.227-40.591 12.686-40.591 40.357l0.026 84.293c1.278 24.976 13.887 38.864 36.693 40.18l89.432 0 0 41.765L404.522 503.258l-1.047 0.142c-6.968 1.988-15.656 7.667-17.358 23.143-0.696 4.31 0.079 7.847 2.36 10.531 2.764 3.252 7.435 4.851 14.199 4.851l122.458 0c-26.059 35.212-72.122 70.911-137.365 106.403-6.208 4.131-12.146 12.443-4.582 29.221 8.467 11.255 18.948 13.887 28.498 8.417 56.917-27.879 98.66-59.837 124.305-95.176l0.023 117.785c1.396 12.804 9.23 19.854 22.072 19.854l0.219 0 0.195-0.028c12.982-1.446 19.862-9.087 19.862-22.067L578.361 588.906c33.892 39.544 81.181 74.6 140.708 104.387 3.534 1.758 6.968 2.635 10.222 2.635 7.384 0 13.68-4.493 18.688-13.474C757.377 663.557 747.515 655.09 740.7 651.685zM470.333 419.159c-12.547 0-18.123-5.602-18.123-18.148l-0.012-47.871c-0.502-5.302 0.295-9.125 2.322-11.343 1.758-1.95 4.779-2.93 8.971-2.93 0.891 0 1.847 0.039 3.174 0.142l183.147-0.012c0.851-0.079 1.676-0.105 2.478-0.105 7.151 0 15.306 2.286 15.306 20.083l0 43.883c0 11.254-5.007 16.302-16.261 16.302L470.333 419.16z" p-id="22296" fill="#b5673e"></path></svg>
					<!-- </text> -->
					<text>服务保障</text>
					<text class="service">支持极速退款·7天无理由退换·正品发票</text>
				</view>
			</view>
		</view>
		<!-- 平台优惠 -->
		<view class="buckle">
			<view class="discount big">
				<text class="title">平台优惠</text>
			</view>
			<view class="discount">
				<text class="title">商品总额</text>
				<view class="fares">
					589.0元
				</view>
			</view>
			<view class="discount">
				<text class="title">积分已省</text>
				<view class="fares cut">
					-500元
				</view>
			</view>
			<view class="discount">
				<text class="title">物流运费</text>
				<view class="fares">
					0元
				</view>
			</view>
		</view>
		<pay-type></pay-type>
		<view class="submitOrder">
			<view class="total">
				<view class="actualPayment">
					合计：
				</view>
				<view class="score-left">
					<text>5000</text>
					<text>积分</text>+89元(免邮费)
				</view>
			</view>
			<view class="orderfrom" @click="submitOrder">
				提交订单
			</view>
		</view>
		<edit-address ref="editAddr"></edit-address>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showMore:false
			}
		},
		computed:{
			addressObj(){
				return this.$store.state.addressObj
			}
		},
		methods: {
			submitOrder(){
				this.$uniGo("navigateTo",{
					url:"/pages/order/order-status"
				})
				
				// uni.navigateTo({
				// 	url:"/pages/order/order-status"
				// })
			},
			editAddr(){
				console.log("编辑地址")
				this.$refs.editAddr.open()
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		padding-bottom: 130rpx;
	}
	.word{
		padding: 20rpx;
		padding-bottom: 150rpx;
	}
	.address-wrap{
		background-color: #fff;
		border-radius: 15rpx 15rpx 0 0;
		.address,.no-address{
			width: 100%;
			height: 160rpx;
			padding: 0 0 0 25rpx;
			display: flex;
			align-items: center;
			position: relative;
			image{
				position: absolute;
				left: 0;
				bottom: 0;
			}
		}
		.name,.no-address-txt{
			font-size: $uni-font-size-lg;
			font-weight: bold;
		}
		.info{
			flex: 1;
			display: flex;
			position: relative;
			flex-direction: column;
			justify-content: center;
			.address-right{
				position: absolute;
				right: 20rpx;
			}
			.info-top{
				.default{
					background-color: $theme-color;
					color: #fff;
					font-size: $uni-font-size-sm;
					border-radius: 5rpx;
					padding: 0 5rpx;
					margin-right: 5rpx;
				}				
			}
			.area{
				margin-top: 20rpx;
				.area_txt{
					color: $uni-text-color-grey;
					.username{
						margin-right: 10rpx;
					}
				}
			}
		}
		.no-address{
			.info{
				display:flex;
				flex-direction: row;
				justify-content: left;
				.no-address-txt{
					margin-left: 10rpx;
				}
			}
		}
	}
	.order{
		margin: 20rpx auto;
		background-color: #fff;
		position: relative;
		border-radius: 10rpx;
		.details{
			padding: 30rpx 20rpx;
			display: flex;
			position: relative;
			border-bottom: 1px solid #e5e5e5;
			.img-box{
				flex: 0 0 172rpx;
				position: relative;
				overflow: hidden;
				image{
					width: 172rpx;
					height: 172rpx;
					border-radius: 10rpx;
				}
			}
			.detail_item{
				display: flex;
				flex-direction: column;
				padding-left: 20rpx;
				font-size: $uni-font-size-base;
				justify-content: space-between;
				.title{
					font-weight: bold;
				}
				.sans{
					font-size: $uni-font-size-sm;
					color: $uni-text-color-grey;
				}
				.othing{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.new-score-style{
						color: $theme-color;
						font-weight: bold;
						font-size: $uni-font-size-sm;
						text{
							font-size: $uni-font-size-base;
						}
					}
					.new-score-style-txt{
						text-decoration: line-through;
					}
				}
			}
		}
		.service-box{
			height: 70rpx;
			line-height: 70rpx;
			padding: 0 20rpx;
			.service-left{				
				display: flex;
				align-items: center;
				font-size: $uni-font-size-sm;
				.service{
					margin-left: 50rpx;
					color: #b5673e;
				}
			}
		}
	}
	.buckle{
		margin: 20rpx auto;
		background-color: #fff;
		position: relative;
		border-radius: 10rpx;
		padding: 15rpx 30rpx 30rpx;
		.discount{
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-weight: bold;
			margin-bottom: 10rpx;
			padding: 20rpx 0;
			&.big{
				font-size: $uni-font-size-lg;
			}
			.cut{
				color: $theme-color;
			}
		}
	}
	.submitOrder{
		width: 100%;
		height: 110rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;
		box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, .1);
		.total{
			width: 60%;
			height: 100%;
			padding: 20rpx 20rpx 0 0;
			display: flex;
			flex-direction: column;
			text-align: right;
			.score-left{
				color: $theme-color;
				font-size:$uni-font-size-sm;
				text{
					font-weight: bold;
					&:first-of-type{
						font-size: $uni-font-size-lg;
					}
				}
			}
		}
		.orderfrom{
			width: 40%;
			height: 100%;
			background-color: $theme-color;
			color: #fff;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>
